﻿
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->

    <title>角色管理 - 管理员管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
</head>
<style>
    .ff,.role{
        width:100%;
        height:100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index:100;
        background-color: rgba(10,10,10,.4);
        display: none;
    }
    .ff form,.role form{
        width:540px;
        height:200px;
        background: #fff;
        margin:100px auto 0;
        padding:50px 20px 20px;
        border-radius: 6px;
    }
    .formControls{
        padding-right:50px;
    }
    .close,.close_r{
        width:30px;
        height:30px;
        font-size:20px;
        line-height:30px;
        position: absolute;
        right: 5px;
        top: 5px;
        text-align: center;
        cursor: pointer;
    }
    .edit,.edit_r{
        display: none;
    }
    .roleList{
        width: calc(100% - 67px);
        height: 170px;
        list-style: none;
        position: absolute;
        left: 15px;
        top: 31px;
        background-color: #fff;
        border: 1px solid #e3e3e3;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        z-index: 2;
        display: none;
        overflow-y:auto;
    }
    .roleList li{
        width:calc(100% - 20px);
        height:30px;
        line-height:30px;
        padding: 0 10px;
        cursor: pointer;
    }
    .roleList li:hover{
        background-color: #e3e3e3;
    }
</style>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span
        class="c-gray en">&gt;</span> 管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                              href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <!--<div class="text-c"> 日期范围：-->
            <!--<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemin"-->
                   <!--class="input-text Wdate" style="width:120px;">-->
            <!-- - -->
            <!--<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})"-->
                   <!--id="datemax" class="input-text Wdate" style="width:120px;">-->
            <!--<input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" id="" name="">-->
            <!--<button type="submit" class="btn btn-success" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户-->
            <!--</button>-->
        <!--</div>-->
        <div class="cl pd-5 bg-1 bk-gray" style="margin-top:20px;"><span class="l"> <a
                class="btn btn-primary radius" href="javascript:;"
                onclick="role_add()"><i class="Hui-iconfont">&#xe600;</i> 添加管理员</a> </span>
            <span class="r">共有数据：<strong id="totalCount">0</strong> 条</span></div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg">
                <thead>
                <tr>
                    <th scope="col" colspan="7">角色管理</th>
                </tr>
                <tr class="text-c">
                    <th width="40">ID</th>
                    <th width="150">管理员名称</th>
                    <th width="150">创建时间</th>
                    <th width="150">最近登陆</th>
                    <th width="70">操作</th>
                </tr>
                </thead>
                <tbody id="listContent">
                </tbody>
            </table>
            <div class="row cl">
                <div class="col-xs-4 col-sm-3 text-l" style="margin-top: 30px;height:30px;line-height: 30px;">
                    当前：第 <span id="nowPage">1</span> 页 / 总：<span id="totalPages"></span> 页
                </div>
                <div class="col-xs-8 col-sm-9 text-r" style="margin-top: 30px;">
                    <input class="btn btn-default-outline radius" type="button" id="previous"
                           value="&nbsp;&nbsp;上一页&nbsp;&nbsp;">
                    <input class="btn btn-primary radius" type="button" id="next" value="&nbsp;&nbsp;下一页&nbsp;&nbsp;">
                </div>
            </div>
        </div>
    </article>
</div>
<article class="cl pd-20 ff">
    <form action="" method="post" class="form form-horizontal" id="form-admin-role-add" style="position:relative;">
        <div class="close">X</div>
        <div class="row cl add">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text add" placeholder="管理员名称" id="roleName" name="roleName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3 add"><span class="c-red">*</span>密码：</label>
            <label class="form-label col-xs-4 col-sm-3 edit"><span class="c-red">*</span>新密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" placeholder="密码位数为6-20位" id="pwd">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" placeholder="确认密码" id="rpwd">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius add" id="admin-role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
                <button type="button" class="btn btn-success radius edit" id="admin-role-edit" name="admin-role-edit"><i class="icon-ok"></i> 提交</button>
            </div>
        </div>
    </form>
</article>
<article class="cl pd-20 role">
    <form action="" method="post" class="form form-horizontal" style="position: relative;">
        <div class="close_r">X</div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-2">角色：</label>
            <div class="formControls col-xs-9 col-sm-10">
                <input type="text" class="input-text" autocomplete="off"  placeholder="请输入角色名称" id="adminName" name="adminName">
                <ul class="roleList">

                </ul>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-9 col-sm-10 col-xs-offset-3 col-sm-offset-2" >
                <input class="btn btn-primary radius add_r" type="button" value="&nbsp;&nbsp;确认添加&nbsp;&nbsp;" id="add_role">
                <input class="btn btn-primary radius edit_r" type="button" value="&nbsp;&nbsp;确认修改&nbsp;&nbsp;" id="edit_role">
                <input class="btn btn-danger radius edit_r" type="button" value="&nbsp;&nbsp;删除角色&nbsp;&nbsp;" id="del_role">
            </div>
        </div>
    </form>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/common.js"></script>
<script type="text/javascript">
    /*管理员-角色-添加*/
    function role_add() {
        $(".add").show();
        $(".edit").hide();
        $(".ff").fadeIn();
    }
    $("#admin-role-save").click(function(){
        var obj = {
            name:$("#roleName").val(),
            pwd:$("#pwd").val(),
            rpwd:$("#rpwd").val()
        };
        if(obj.name == ""){
            alert("管理员名称不能为空");
        }else if(obj.pwd.length < 6 || obj.pwd.length > 20){
            alert("密码位数为6-20位");
        }else if(obj.pwd != obj.rpwd){
            alert("两次密码不一致");
        }else{
            $.post(url+"/manager/user/add",{nickName:obj.name,pswd:obj.pwd}).success(function(res){
                if (res.status == 1) {
                    location.reload();
                } else if (res.status == 2) {
                    alert("管理员名称重复了,请修改管理员名称");
                } else {
                    alert("添加失败");
                }
            }).error(function(err){
                alert("添加失败")
            }).complete(function () {
                $(".ff").fadeOut();
            })
        }
    });
    /*管理员-角色-编辑*/
    //修改角色
    var edit_id;
    function edit_role(that,event) {
        var e = event || window.event;
        e.stopPropagation();
        e.preventDefault();
        edit_id = $(that).parents("tr").children("td").eq(0).html();
        $(".ff").fadeIn();
        $(".add").hide();
        $(".edit").show();
    }
    //修改密码提交
    $("#admin-role-edit").click(function(){
        var pwds = {
            now : $("#pwd").val(),
            renow: $("#rpwd").val()
        };
        if(pwds.now.length < 6 || pwds.now.length > 20){
            alert("密码位数为6-20位")
        } else if(pwds.now != pwds.renow){
            alert("两次密码不一致");
        }else{
            $.post(url+"/manager/user/update",{id:Number(edit_id),pswd:pwds.now}).success(function(res){
                if(res.status == 1){
                    alert("修改成功");
                }
            }).error(function(err){
                alert("修改失败")
            }).complete(function () {
                $(".ff").fadeOut();
            })
        }
    });
    $(".close").click(function(){
        $(".ff").fadeOut();
    });

    /*管理员-角色*/
    function createHtml(id, name, createTime, loginTime) {
        var str = '<tr class="text-c">' +
            '<td>' + id + '</td> <td>' + name + '</td>' +
            ' <td>' + createTime + '</td><td>' + loginTime + '</td> <td class="f-14"><a title="编辑" href="javascript:;" onclick="edit_role(this,event)" style="text-decoration:none">' +
            '<i class="Hui-iconfont">&#xe6df;</i>修改密码</a></td></tr>';
        return str;
    }
    //添加管理员
    function sure_add(id, name, time) {
        var str = createHtml(id, name, time, "");
        $("#listContent").append(str);
        layer_close();
    }

    var r_url = url + "/manager/user/list";
    var dataList = [];
    var isGetRole = false;
    $(function () {
        $.post(r_url, {pageSize: pageSize, pgeNum: pageNum}).success(function (res) {
            if (res) {
                totalCount = res.total;
                $("#totalPages").html(Math.ceil(totalCount / pageSize));
                $("#totalCount").html(totalCount);
                var str = "";
                var data = res.list;
                dataList = res.list;
                for (var i = 0; i < data.length; i++) {
                    str += createHtml(data[i].id, data[i].nickname, data[i].create_time, data[i].last_login_time);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
            } else {
                alert("获取数据失败");
            }
        }).error(function (err) {
            alert("获取数据失败");
        });
        //获取角色列表
        getRoleList();
    });
    function getRoleList(){
        $.post(url+"/manager/role/listNoPage").success(function(res){
            if(res){
                roleList = res.reList;
                var str = "";
                for(var i = 0;i < roleList.length;i++){
                    str += "<li class='roleItem' data-t='" + roleList[i].id +"'>"+ roleList[i].name +"</li>"
                }
                $(".roleList").html(str);
            }
            isGetRole = true;
        }).error(function(err){
            alert("获取角色列表失败");
        })
    }
    //上一页
    $("#previous").click(function () {
        if (nowPage == 1) {
            alert("再往前就没有了");
        } else {
            nowPage--;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < nowPage * pageSize; s++) {
                str += createHtml(list[s].id, list[s].nickname, list[s].create_time, list[s].last_login_time);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        }
    });
    //下一页
    $("#next").click(function () {
        var p = nowPage * pageSize;
        if (p >= totalCount) {
            alert("再往后就没有了");
        } else if (p < list.length) {
            nowPage++;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < list.length; s++) {
                str += createHtml(list[s].id, list[s].nickname, list[s].create_time, list[s].last_login_time);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        } else {
            nowPage++;
            $.post(r_url, {pageSize: pageSize, pgeNum: nowPage}).success(function (res) {
                var str = "";
                var data = res.list;
                for (var i = 0; i < data.length; i++) {
                    str += createHtml(data[i].id, data[i].nickname, data[i].create_time, data[i].last_login_time);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
                $("#nowPage").html(nowPage);
            }).error(function () {
                alert("获取数据失败");
            });
        }
    });
    //获取管理员角色
    var isGet = false;
    var oldRoleObj = {},newRoleObj={};
    var roleList = [];
    var uid;
    $("#listContent").on("click","tr",function(){
        if(!isGet){
            isGet = true;
            var index = $(this).index("#listContent tr");
            if(!isGetRole){
                getRoleList();
            }
            uid = $(this).children("td").eq(0).html();
            $.post(url+"/manager/role/rolesByUser",{uid:uid}).success(function(res){
                $(".role").fadeIn();
               if(res != ""){
                   oldRoleObj = res;
                   newRoleObj = res;
                   $(".edit_r").show();
                   $(".add_r").hide();
                   $("#adminName").val(res.name);
                   $("#adminRole").val(res.type);
               }else{
                   $(".edit_r").hide();
                   $(".add_r").show();
                   $("#adminName").val("");
                   $("#adminRole").val(-1);
               }
            }).error(function(){
                isGet = false;
            }).complete(function () {
                isGet = false;
            })
        }
    });
    $(".close_r").click(function(){
        $(".role").fadeOut();
        isGet = false;
    });
    $("#adminName").focus(function () {
       $(".roleList").fadeIn();
    }).blur(function(){
        $(".roleList").fadeOut();
    }).on("input propertychange",function(){
        var name = $(this).val();
        for(var i = 0;i < roleList.length;i++){
            if(roleList[i].name.indexOf(name) != -1){
                $(".roleItem").eq(i).show();
            }else{
                $(".roleItem").eq(i).hide();
            }
        }
    });
    $(".roleList").on("click",".roleItem",function(){
       var index = $(this).index(".roleItem");
       $("#adminName").val(roleList[index].name);
       newRoleObj = roleList[index];
    });
    //给管理员添加角色
    $("#add_role,#edit_role").click(function(){
        if($("#adminName").val() == ""){
            alert("角色不能为空!");
        }else{
            $.post(url+"/manager/role/userUpRole",{uid:uid,rid:newRoleObj.id}).success(function (res) {
                if(res.status == 1){
                    alert("操作成功");
                }else{
                    alert("操作失败");
                }
            }).error(function () {
                alert('操作失败');
            }).complete(function(){
                $(".role").fadeOut();
            })
        }
    });
    $("#del_role").click(function(){
        if(confirm("确认删除该角色？")){
            $.post(url+"/manager/role/delRolesByUser",{uid:uid,rid:oldRoleObj.id}).success(function(res){
                if(res.status == 1){
                    oldRoleObj = {};
                    alert("删除成功");
                }else{
                    alert("删除失败");
                }
            }).error(function (err) {
                alert("删除失败");
            }).complete(function(){
                $(".role").fadeOut();
            })
        }
    })
    //修改管理员角色
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>